<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Play with Google Maps </title>
<meta name="Generator" content="EditPlus" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="Keywords" content="Play, Google Maps" />
<meta name="Description" content="Play with Google Maps" />
<style type="text/css" media="screen">
<!--
html,body{height:100%;margin:0 auto;font:12px/1.6em arial;color: #555;}
#map{width:600px;height:400px;}
#mario{position: absolute; width:32px;height:64px;background: url(mario.gif) no-repeat 0 0;}
#cboMap1{color: #000;margin:0;padding:0;}
#cboMap1 li{width:30px;float: left;background: #fff;border: 1px solid #666;padding:1px 10px;cursor:pointer;*padding:2px 10px 1px;text-align: center;list-style:none;margin:0;}
#cboMap1 li.on{background: #eee;font-weight:bold;border: 1px solid #000;}
#adm strong{padding:0 45px 0 20px;}
-->
</style>
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAACZoLVN79WT2mXp8M7Dsi-hSVbq8cAqMDJReYWuWY3FAJPhxoRBTRhRCgpQhnPbuLwfaAbgqLte5Baw" ></script>
<script type="text/javascript">
//<![CDATA[

window.onload = play;
window.onunload = GUnload;

var map = null, mk = null, point = null;

function play() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById('map'));
		point = new GLatLng(39.914,116.390);
		map.setCenter(point, 17);
		map.setMapType(G_SATELLITE_MAP);
		map.disableDoubleClickZoom();
		
		addMario(point);

	}
}
function addMario(point){
	mk = new mario(point);
	map.addOverlay(mk);
	map.openInfoWindowHtml(point,"请在地图上找出太和殿和金水桥");
}

function mario(point) {
  this.point_ = point;
}
mario.prototype = new GOverlay();

mario.prototype.initialize = function(m) {
  var div = document.createElement("div");
  div.id = 'mario';
  m.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
  this.map_ = m;
  this.div_ = div;
  this.walk();
}

mario.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

mario.prototype.copy = function() {
  return new mario(this.point_);
}

mario.prototype.redraw = function(force) {
  if (!force) return;
  var c1 = this.map_.fromLatLngToDivPixel(this.point_);
  this.div_.style.left = c1.x+"px";
  this.div_.style.top = c1.y+"px";
}

mario.prototype.walk = function (){
	document.par =this;
	var frame = 0,n_01 = 0, n_02 = 0, stage=0;
	document.onkeypress = function(e){
		var p_this = this.par.div_,
			mapWidth = map.getSize().width,
			mapHeight = map.getSize().height,
			leftN = parseInt(p_this.style.left),
			topN = parseInt(p_this.style.top);
			pointPs = new GPoint(leftN, topN);
		point = map.fromDivPixelToLatLng(pointPs);
		var lat = point.lat(),
			lng = point.lng(),
			bounds = map.getBounds(),
			southWest = bounds.getSouthWest(),
			northEast = bounds.getNorthEast(),
			latMin = southWest.lat(),
			lngMin = southWest.lng(),
			latMax = northEast.lat(),
			lngMax = northEast.lng(),
			pointPs0 = new GPoint(0, 0),
			latLngPs0 = map.fromDivPixelToLatLng(pointPs0),
			pointPs1 = new GPoint(32, 64),
			latLngPs1 = map.fromDivPixelToLatLng(pointPs1),
			xa = Math.abs(latLngPs1.lng()-latLngPs0.lng()),
			ya = Math.abs(latLngPs1.lat()-latLngPs0.lat()),
			keyNum = e ? e.which : window.event.keyCode;

		if(lat.toString().substr(0,6)=='39.916' && lng.toString().substr(0,7)=='116.390'){
			if(n_01==0){
			   if(n_02==1){
					var tips = '游戏结束<a href="#">进入下一级</a>';
			   }else{
					var tips = "你找到了太和殿<br />请继续找出金水桥";
			   }
			   map.openInfoWindowHtml(point,tips);
			   var marker1 = new GMarker(new GLatLng(39.916,116.390));
			   map.addOverlay(marker1);
			   n_01 = 1;
			}
		}
		if(lat.toString().substr(0,6)=='39.913' && lng.toString().substr(0,7)=='116.390'){
			if(n_02==0){
			   if(n_01==1){
					var tips = '游戏结束<a href="#">进入下一级</a>';
			   }else{
					var tips = "你找到了金水桥<br />请继续找出太和殿";
			   }
			   map.openInfoWindowHtml(point,tips);
			   var marker2 = new GMarker(new GLatLng(39.913,116.390));
			   map.addOverlay(marker2);
			   n_02 = 1;
			}
		}
		if(n_01 == 1 && n_02 == 1 && stage==0){
			p_this.style.backgroundPosition = "0 0";
			map.openInfoWindowHtml(point,'游戏结束<a href="#">进入下一级</a>');
			stage=1;
			//return;
		}
		switch (keyNum) {
			case (115):
				if (frame>3) frame=1;
					frame++;
				if (frame==4) frame=1;
				p_this.style.backgroundPosition = "-"+frame*32+"px 0";
				p_this.style.top = topN + 5 + "px";
				if(lat<latMin+ya){
					map.panBy(new GSize(0,-(mapHeight/3)));
				}
				break;
			case (100):
				if (frame>3) frame=1;
					frame++;
				if (frame==4) frame=1;
				p_this.style.backgroundPosition = "-"+frame*32+"px 0";
				p_this.style.left = leftN + 5 + "px";
				if(lng>lngMax-xa){
					map.panBy(new GSize(-(mapWidth/3),0));
				}
				break;
			case (119):
				if (frame<=3) frame=4;
					frame++;
				if (frame==7) frame=4;
				p_this.style.backgroundPosition = "-"+frame*32+"px 0";
				p_this.style.top = topN - 5 + "px";
				if(lat>latMax){
					map.panBy(new GSize(0,mapHeight/3));
				}
				break;
			case (97):
				if (frame<=3) frame=4;
					frame++;
				if (frame==7) frame=4;
				p_this.style.backgroundPosition = "-"+frame*32+"px 0";
				p_this.style.left = leftN - 5 + "px";
				if(lng<lngMin){
					map.panBy(new GSize(mapWidth/3,0));
				}
				break;
			 case (122):
				if (zoom<18){
					zoom++;
					map.panTo(point);
					map.setZoom(zoom);
				}
				break;
			case (120):
				if (zoom>1){
					zoom--;
					map.panTo(point);
					map.setZoom(zoom);
				}
				break; 
		}
	};
}
//]]>
</script>
</head>

<body>

<div id="wrap">
	<div id="map"></div>
</div>
<div id="adm"><strong></strong>控制键：键盘上的A/D/W/S分别对应左右上下四个方向</div>
</body>
</html>